<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>
        12渲染列表
    </title>
    <script type="text/javascript" , src="../js/vue.js">

    </script>
</head>

<body>
    <div id="root">
        <h2> {{name}} </h2>
        <ul>
            <li v-for></li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li v-for="p in persons" :key="p.id">姓名：{{p.name}} id:{{p.id}} age:{{p.age}}</li>
            <li v-for="(val,k) in car" :key="k"> {{k}} - {{val}}   </li><br>
            <li v-for="(val,k) in str" :key="k"> {{k}} - {{val}}   </li>
        </ul>

        <button @click="update">点击更新</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

          // const obs = new Observer(data)
        // console.log(obs)
        // function Observer(obj) {
        //     const keys = Object.keys(obj)
        //     keys.forEach((key)=>{
        //       Object.defineProperty(this,k,{
        //         get(){
        //             return obj[k]
        //         },
        //         set(val){
        //             obj[k] = val
        //         }
        //       })
        //     })
        // }
        new Vue({
            el: '#root',
            data() {
                return {
                    name: "name",
                    persons:[
                        {id:'001', name:"q", age:18},
                        {id:'002', name:"w", age:19},
                        {id:'003', name:"r", age:20},
                    ],
                    car:{
                        name:"名字",
                        价格:"10w",
                        颜色:"red"
                    },
                    str:"hello"


                }
            },
            // watch(){
            //     persons:{
            //     }
            // },
            methods: {
                update(){
                    console.log('来吧')
                    this.persons[0] = {id:'001', name:"q11", age:180}   
                }
            },
        })

        // const obs = new Observer(data)
        // console.log(obs)
        // function Observer(obj) {
        //     const keys = Object.keys(obj)
        //     keys.forEach((key)=>{
        //       Object.defineProperty(this,k,{
        //         get(){
        //             return obj[k]
        //         },
        //         set(val){
        //             obj[k] = val
        //         }
        //       })
        //     })
        // }
    </script>

</body>


</html>